import React, { useState, useEffect } from "react";
import { Table, Button } from "antd";
import { getRowSpanCount2, mockData } from "../utils/func";
import "../assets/css/detail.css";
// console.log(mockData)

function List() {
  const [dataSource, setdataSource] = useState(mockData)
  // 表格列
  const columns = [
    {
      title: "类别",
      dataIndex: "col_0",
      key: "col_0",
      width: 100,
      align: "center",
      colSpan: 3,
      render: (value, row, index) => {
        let newRow = getRowSpanCount2(mockData, "col_0", index, value);
        return newRow;
      },
    },
    {
      title: "类别",
      colSpan: 0,
      dataIndex: "col_1",
      key: "col_1",
      width: 100,
      align: "center",
      render: (value, row, index) => {
        let newRow = getRowSpanCount2(mockData, "col_1", index, value, "col_0");
        return newRow;
      },
    },
    {
      title: "类别",
      dataIndex: "col_2",
      key: "col_2",
      colSpan: 0,
      width: 100,
      align: "center",
    },
    {
      title: "日期",
      children: [
        {
          title: "单位",
          dataIndex: "unit",
          key: "unit",
          width: 100,
          align: "center",
        },
        {
          title: "范围",
          dataIndex: "value",
          key: "value",
          width: 100,
          align: "center",
        },
      ],
    },
  ];

  return (
    <div>
      <Table
        style={{ padding: "30px", width: "1200px" }}
        columns={columns}
        dataSource={dataSource}
        bordered
        size="small"
        pagination={false}
        rowKey={(row) => row.id}
        scroll={{ x: '100%' }}
      />
    </div>
  );
}

export default List;
